<template>
  <div class="RecommedEvaluate">
    <div class="top">
      <span class="stars">
        <img :src="item" v-for="(item,index) in stars" :key="index">
        <em>3.8</em>
      </span>
      <span class="top_right">6条评价</span>
    </div>
    <div class="cloud-tag">
      <a
        class="tag-hot"
        href="https://i.meituan.com/poi/193305605/feedbacks?label=%25E6%259C%258D%25E5%258A%25A1%25E7%2583%25AD%25E6%2583%2585"
      >
        <span class="tag-title">
          服务热情
          <span class="tag-num">3</span>
        </span>
      </a>
    </div>
    <div class="evaluate_content">
      <div class="user">
        <div class="userImg_box">
          <img
            src="//p0.meituan.net/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png@37w_37h_1e_1c"
            alt
          >
        </div>
        <div class="userInfo_box">
          <div class="userInfo_box_top">
            <span>GTJ716755467</span>
          </div>
          <div class="score">
            <span class="userInfo_box_stars">
              <img :src="star" v-for="(star,index) in stars" :key="index">
            </span>
            <span class="time">2019-05-21</span>
          </div>
        </div>
        <div class="serious_evaluation">
          <img
            src="//s1.meituan.net/bs/file?f=meis/meishi.mobile:img/serious-evaluation.png@9e62644"
            alt
          >
        </div>
      </div>
      <div class="content">
        <div class="content_box">
          <span>因为要乘坐下午2点50的高铁，通过百度在成都东站附近站点就近选择了这家火锅，离东站只有一站地铁，下地铁步行了9分钟左右，在华宇广场商圈内，周围还有很多美食，选择余地非常大。这家火锅正宗川味，老板热情周到，价格也非常接地气，4个人团餐138元，性价比超高。</span>
        </div>
      </div>
      <div class="shopImg">
        <div class="shopImg_box" v-for="(item,index) in shopImg" :key="index">
          <img :src="item">
        </div>
      </div>
      <div class="shopMsg">
        <div class="shopMsg_head">商家回复:</div>
        <div class="shopMsg_content">感谢您的光顾，我们会继续努力哒，把服务和菜品做得更好。</div>
      </div>
    </div>
    <div class="footer">
      <span class="footer_content">查看全部6条评价</span>
      <span class="iconfont right">&#xe601;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommedEvaluate",
  data() {
    return {
      stars: [
        "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317",
        "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317",
        "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317",
        "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/cb45534a7d3737c0.png@eeae317",
        "http://s1.meituan.net//bs/file/?f=meis/meishi.mobile:assets/e076efca46320452.png@eeae317"
      ],
      shopImg: [
        "//p0.meituan.net/shaitu/67841a540895080f1fd375a809245d04253329.jpg@55w_55h_1e_1c",
        "//p0.meituan.net/shaitu/95e71110c297b5d5f0a10373fac64409171840.jpg@55w_55h_1e_1c",
        "//p1.meituan.net/shaitu/21f0702c8855592414911cd483ef1b0d733525.jpg@55w_55h_1e_1c",
        "//p1.meituan.net/shaitu/72b1d32cecf27a49dca3701f5c23ffa9700945.jpg@55w_55h_1e_1c"
      ]
    };
  }
};
</script>

<style scoped>
.RecommedEvaluate {
  border-top: 1px solid #ddd8ce;
  border-bottom: 1px solid #ddd8ce;
  margin-top: 0.2rem;
  margin-bottom: 0;
  background-color: #fff;
}
.top {
  position: relative;
  padding: 0.21rem 0.2rem 0.21rem 0;
  margin-left: 0.2rem;
  border-bottom: 0;
  color: inherit;
  height: 100%;
  display: flex;
}
.stars {
  display: inline-flex;
  color: #fa952f;
  align-items: center;
}
.stars img {
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.04rem;
}
.stars em {
  font-style: normal;
  margin-left: 0.4rem;
  font-size: 0.34rem;
  vertical-align: middle;
}
.top_right {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  font-size: 0.35rem;
}
.cloud-tag {
  overflow: hidden;
  font-size: inherit;
  font-weight: 400;
  position: relative;
  padding: 0.19rem 0.2rem 0.12rem 0;
  margin-left: 0.2rem;
  border-top: 1px solid #ddd8ce;
}
.tag-hot {
  float: left;
  margin-bottom: 0.14rem;
  margin-right: 0.1rem;
  font-size: 0.28rem;
  padding: 0.15rem 0.11rem;
  color: #999;
  border: 2px solid #fdb338;
  border-radius: 0.06rem;
}
.tag-title {
  color: #fdb338;
}
.tag-num {
  margin-left: 0.05rem;
}
.evaluate_content {
  padding: 0.28rem 0.2rem 0.28rem 0;
  margin-left: 0.2rem;
  border-top: 1px solid #ddd8ce;
}
.user {
  position: relative;
}
.userImg_box {
  position: absolute;
  width: 0.74rem;
  height: 0.74rem;
  vertical-align: top;
}
.userInfo_box {
  margin-left: 0.8rem;
  font-size: 0.24rem;
  color: #999;
  vertical-align: top;
  height: 0.73rem;
  overflow: hidden;
}
.serious_evaluation {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: -0.18rem;
  right: 0.25rem;
}
.serious_evaluation img {
  width: 100%;
  height: 100%;
}
.userInfo_box_top {
  display: flex;
  margin-bottom: 0.06rem;
  font-size: 0.24rem;
  line-height: 1.41;
  color: #666;
}
.score {
  display: flex;
  margin-bottom: 0.4rem;
  font-size: 0.24rem;
  margin-top: -0.06rem;
}
.userInfo_box_stars {
  display: inline-flex;
  margin-right: 0.2rem;
  font-size: 0.28rem;
  vertical-align: bottom;
}
.userInfo_box_stars img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.04rem;
}
.content {
  margin-top: 0.3rem;
  margin-bottom: 0.22rem;
  font-size: 0.3rem;
}
.content_box {
  text-align: justify;
}
.shopImg {
  margin-bottom: 0.26rem;
  display: flex;
}
.shopImg_box {
  display: inline-flex;
  height: 1.1rem;
  width: 1.1rem;
  margin-right: 0.1rem;
  margin-bottom: 0.14rem;
}
.shopImg_box img {
  width: 100%;
  height: 100%;
}
.shopMsg {
  color: #666;
  margin-top: 0.2rem;
  background-color: #f7f7f6;
  padding: 0.2rem;
  position: relative;
  border-radius: 0.06rem;
}
.shopMsg::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  top: -0.1rem;
  left: 0.5rem;
  background-color: #f7f7f6;
  -webkit-transform: rotateZ(45deg);
}
.shopMsg_head {
  border-bottom: 1px solid #e0ddd7;
  font-size: 0.24rem;
  padding-bottom: 0.2rem;
  color: #666;
  display: flex;
}
.shopMsg_content {
  text-align: justify;
  margin-top: 0.2rem;
  font-size: 0.3rem;
  color: #ed852c;
}
/* footer的style */
.footer {
  position: relative;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  border-top: 1px solid #ddd8ce;
  display: flex;
  color: #06c1ae;
  padding: 0 0.2rem;
}
.iconfont.right {
  font-size: 0.4rem;
  font-weight: 700;
  position: absolute;
  right: 0.2rem;
}
</style>
